<template>
	<view>
		<custom-ui bgColor="bg-gradual-orange" :isBack="true"><block slot="content">热门歌手</block></custom-ui>
			<view v-for="(item,index) in singerList" :key='item.id'>
				<view class="aa">{{item.name}}</view>
				<!-- <view class="align-center indexToast flex" @click="gotoList" v-for="(letter,index) in item.value" :key='letter.id'>
					<image :src="letter.img1v1Url" mode=""></image>
					<view>{{letter.name}}</view>
				</view> -->
				<view class="cu-list menu-avatar">
					<view class="cu-item" style="justify-content: flex-start;" v-for="letter in item.value" :key="letter.id" @click.self="gotoList">
						<image :src="letter.img1v1Url" mode=""></image>
						<view style="color: rgb(135,153,163)">{{ letter.name }}</view>
					</view>
				</view>
				
			</view>
	</view>
	
</template>

<script>
	import { getGroupByPinyin } from '@/utils/pinyin/utils.js';
	export default {
		data:function() {
			return {

				singerList:[
				
				]
			};
		},
		methods:{
			getListHandel(){
				uni.request({
					url:'https://autumnfish.cn/top/artists?limit=80',
					success:(res)=>{
						console.log(res.data);
						var non_sorted_list = res.data.artists;
						this.singerList = getGroupByPinyin(non_sorted_list);
						// console.log(this.singerList);
					}
			
				});
			},
			gotoList:function(){
				uni.navigateTo({
					url:'../SingerDesc/SingerDesc'
				})
			}
		},
		onLoad(){
			console.log('页面打开了'),
			this.getListHandel()
		
		}
	}
</script>
<style lang="scss">
	.box{
		height: 50px;
		line-height: 50px;
		background:linear-gradient(orange,red);
		background: -webkit-linear-gradient(orange,red);
		background: -moz-linear-gradient(orange,red);
		background: -o-linear-gradient(orange,red);
		font-size:15px ;
		text-align: center;
	}
	.flex{
			display: flex;
			&-column{
				flex-direction: column;
			}
			&-wrap{
				flex-wrap: wrap;
			}
		}
	
		.flex{
			display: flex;
			&-column{
				flex-direction: column;
			}
			&-wrap{
				flex-wrap: wrap;
			}
		}
		
		.justify{
			&-center{
				justify-content: center;
			}
			&-around{
				justify-content: space-around;
			}
			&-between{
				justify-content: space-between;
			}
		}
		.align-center{
			align-items: center;
		}
		
		.indexes {
			position: relative;
		}
		.indexBar {
			position: fixed;
			right: 0px;
			bottom: 0px;
			padding: 20upx 20upx 20upx 60upx;
			display: flex;
			align-items: center;
		}
		.indexBar .indexBar-box {
			width: 40upx;
			height: auto;
			background: #fff;
			display: flex;
			flex-direction: column;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
			border-radius: 10upx;
		}
		.indexBar-item {
			flex: 1;
			width: 40upx;
			height: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			color: #888;
		}
		movable-view.indexBar-item {
			width: 40upx;
			height: 40upx;
			z-index: 9;
			position: relative;
		}
		movable-view.indexBar-item::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 10upx;
			height: 20upx;
			width: 4upx;
			background-color: #f37b1d;
		}
		
		.sty{
			border-width:1px;
			height: 30px;
			border-color: #FFFFFF;
			border-style:solid ;
			font-size: 18px;
		}
		.indexToast{
			image{
				width: 50px;
				height: 50px;
				margin: 5px;
				margin-left: 20px;
				border-radius: 100%;
			}
		}
		image{
			width: 50px;
			height: 50px;
			margin: 5px;
			margin-left: 20px;
			border-radius: 100%;
		}
		.padding{
			float: right;
		}
		.aa{
			margin-left: 20px;
			margin-top: 20px;
			
		}

</style>
